---
title: Safari
date: 2024-09-01
description: A safari browser mockup to showcase your website.
author: dillionverma, Yeom-JinHo
published: true
---

<ComponentPreview name="safari-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/safari
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="safari" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### With Image

<ComponentPreview name="safari-demo-2" />

### With Video

<ComponentPreview name="safari-demo-3" />

### Simple Mode

<ComponentPreview name="safari-demo-4" />

## Usage

```tsx showLineNumbers
import { Safari } from "@/components/ui/safari"
```

```tsx showLineNumbers
<Safari url="https://magicui.design" />
```

## Props

| Prop        | Type                  | Default     | Description                                                 |
| ----------- | --------------------- | ----------- | ----------------------------------------------------------- |
| `url`       | `string`              | `-`         | The URL to display in the Safari address bar                |
| `imageSrc`  | `string`              | `-`         | The source URL of the image to display in the Safari window |
| `videoSrc`  | `string`              | `-`         | The source URL of the video to display in the Safari window |
| `mode`      | `SafariMode`          | `"default"` | The display mode of the Safari window.                      |
| `className` | `string`              | `-`         | Additional classes applied to the wrapper `<div>`           |
| `style`     | `React.CSSProperties` | `-`         | Inline styles applied to the wrapper `<div>`                |

## Notes

- Sizing: width and height props have been removed. The size is controlled by the wrapper `<div>`. The component enforces the aspect ratio 1203/753.
- Masking: The screen area is only masked when media (src or videoSrc) is provided. Without media, only the frame is rendered.
- HTML Attributes: The Safari component accepts all standard HTMLDivElement props.
- iOS Compatibility: Video is rendered as a DOM overlay instead of foreignObject to avoid Safari/iOS masking issues.
